<template>
  <div class="content">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="贡献者" prop="contributor">
        <el-input v-model="ruleForm.contributor" clearable placeholder="请填写贡献者" style="width:400px" maxlength="10"></el-input>
      </el-form-item>
      <el-form-item label="公司名称" prop="company">
        <el-select v-model="ruleForm.company" placeholder="请选择公司" style="width:400px">
          <el-option v-for="(item,index) in companyList" :key="index" :label="item.name" :value="item.id"></el-option>
          <el-option value="其他" label="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发表文章名" prop="article_name">
        <el-input v-model="ruleForm.article_name" clearable placeholder="请填写发表文章名" style="width:400px" maxlength="100"></el-input>
      </el-form-item>
      <el-form-item label="MID" prop="mid">
        <el-input v-model="ruleForm.mid" clearable placeholder="请填写MID" style="width:400px" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="PID" prop="pid">
        <el-input v-model="ruleForm.pid" clearable placeholder="请填写PID" style="width:400px" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="期刊" prop="periodical">
        <el-input v-model="ruleForm.periodical" clearable placeholder="请填写期刊" style="width:400px">
          期刊
          <el-button slot="append" icon="el-icon-search" @click="searchPeriodical"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="影响因子" prop="factor">
        <el-input v-model="ruleForm.factor" clearable placeholder="请填写影响因子" style="width:400px" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="发表时间">
        <el-select v-model="year" placeholder="请选择年" style="width:200px">
          <el-option v-for="item in 20" :key="item" :value="2026-item" :label="2016-item"></el-option>
        </el-select>
        <span style="padding: 0 20px 0 20px">年</span>
        <el-select v-model="month" placeholder="请选择月" style="width:200px">
          <el-option v-for="item in 12" :key="item" :value="item" :label="item"></el-option>
        </el-select>
        <span style="padding: 0 20px 0 20px">月</span>
        <el-select v-model="day" placeholder="请选择日" style="width:200px">
          <el-option v-for="item in 31" :key="item" :value="item" :label="item"></el-option>
        </el-select>
        <span style="padding: 0 20px 0 20px">日</span> 
      </el-form-item>
      <el-form-item label="是否工一">
        <el-radio-group v-model="ruleForm.is_gongyi">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="3">否</el-radio>
          <el-radio :label="2">未知</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否通讯">
        <el-radio-group v-model="ruleForm.is_tongxun">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="3">否</el-radio>
          <el-radio :label="2">未知</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="合作单位1">
        <el-input v-model="ruleForm.cooperation1" clearable placeholder="请填写合作单位" style="width:400px" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="合作单位2">
        <el-input v-model="ruleForm.cooperation2" clearable placeholder="请填写合作单位" style="width:400px" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="文章方向">
        <el-input v-model="ruleForm.article_direction" clearable placeholder="请填写文章方向" style="width:400px" maxlength="300"></el-input>
      </el-form-item>
      <el-form-item label="文章类型">
        <el-select v-model="ruleForm.article_type" placeholder="请选择文章类型" multiple style="width:600px">
          <el-option v-for="(item,index) in articleTypeList" :value="item.name" :key="index" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="研究方向">
        <el-input v-model="ruleForm.research_direction" clearable placeholder="请填写研究方向" style="width:400px" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="使用数据类型">
        <el-select v-model="ruleForm.data_type" placeholder="请选择使用数据类型" multiple style="width:600px">
          <el-option v-for="(item,index) in dataTypeList" :value="item.name" :key="index" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据种类">
        <el-input v-model="ruleForm.data_class" clearable placeholder="请填写数据种类" style="width:400px" maxlength="40"></el-input>
      </el-form-item>
      <el-form-item label="疾病子类">
        <el-select v-model="ruleForm.disease_class" placeholder="请选择疾病子类" multiple style="width:600px">
          <el-option v-for="(item,index) in diseaseTypeList" :value="item.name" :key="index" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据量">
        <el-input v-model="ruleForm.data_volume" clearable placeholder="请填写数据量" style="width:400px" maxlength="40"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editDetail">提 交</el-button>
        <el-button @click="closeMe" style="margin-left: 10px">返 回</el-button>
      </el-form-item>
    </el-form>
    <!-- 期刊列表 -->
    <el-dialog title="选择期刊" :visible.sync="isShow" width="800px" :append-to-body="true">
      <el-table style="margin-top: 15px" :data="periodicalList" border @current-change="selectTableItem">
        <el-table-column label="期刊" prop="name" align="center"/>
        <el-table-column label="影响因子" prop="factor" align="center"/>
      </el-table>
      <!-- 分页 -->
      <el-pagination 
        style="margin-top: 20px"
        background
        :current-page="page.current"
        :page-sizes="page.sizes"
        :page-size="page.size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import common from '@/mixins/common'
export default {
  mixins: [common],
  data(){
    return {
      year: '',
      month: '',
      day: '',
      ruleForm: {
        contributor: '',
        company: '',
        article_name: '',
        mid: '',
        pid: '',
        periodical: '',
        factor: '',
        publish_time: '',
        is_gongyi: '',
        is_tongxun: '',
        cooperation1: '',
        cooperation2: '',
        article_direction: '',
        article_type: '',
        research_direction: '',
        data_type: '',
        data_class: '',
        disease_class: '',
        data_volume: ''
      },
      rules: {
        contributor: [{ required: true, message: '请输入贡献者'}],
        company: [{ required: true, message: '请选择公司'}],
        article_name: [{ required: true, message: '请填写文章名称'}],
        mid: [{ required: true, message: '请填写MID'}],
        pid: [{ required: true, message: '请填写PID'}],
        periodical: [{ required: true, message: '请搜索并选择期刊'}]
      },
      companyList: [], // 公司列表
      periodicalList: [], // 期刊列表
      articleTypeList: [], // 文章类型列表
      dataTypeList: [], // 使用数据类型列表
      diseaseTypeList: [], // 疾病子类列表
      isShow: false, // 是否显示期刊列表
    }
  },
  created(){
    // 获取详情
    this.axios.post('DETAIL_ARTICLE',{
      id: this.$route.query.id
    }).then(result => {
      console.log('详情',result)
      let data = result.data
      this.ruleForm = {
        ...data,
        article_type: data.article_type != '' ? data.article_type.split(',') : '',
        data_type: data.data_type != '' ? data.data_type.split(',') : '',
        disease_class: data.disease_class != '' ? data.disease_class.split(',') : ''
      }
      if(data.publish_time){
        this.year = Number(data.publish_time.split('年')[0])
        this.month = Number(data.publish_time.split('年')[1].split('月')[0])
        this.day = Number(data.publish_time.split('年')[1].split('月')[1][0])
      }
    })
    // 获取公司列表
    this.axios.post('COMPANY_LIST').then(result => {
      console.log('公司列表',result)
      this.companyList = result.data
    })
    // 获取文章类型列表
    this.axios.post('ARTICLE_TYPE_LIST').then(result => {
      console.log('文章类型列表',result)
      this.articleTypeList = result.data
    })
    // 获取使用数据类型列表
    this.axios.post('DATA_TYPE_LIST').then(result => {
      console.log('使用数据类型列表',result)
      this.dataTypeList = result.data
    })
    // 获取疾病子类列表
    this.axios.post('DISEASE_TYPE_LIST').then(result => {
      console.log('疾病子类列表',result)
      this.diseaseTypeList = result.data
    })
  },
  methods: {
    // 编辑内容
    editDetail(){
      this.$refs.ruleForm.validate(e => {
        if(!e) return
        this.axios.post('EDIT_ARTICLE',{
          ...this.ruleForm,
          article_type: this.ruleForm.article_type != '' ? this.ruleForm.article_type.join(',') : '',
          data_type: this.ruleForm.data_type != '' ? this.ruleForm.data_type.join(',') : '',
          disease_class: this.ruleForm.disease_class != '' ? this.ruleForm.disease_class.join(',') : '',
          publish_time: `${this.year}年${this.month}月${this.day}日`
        }).then(() => {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.closeMe()
        })
      })
    },
    // 模糊查询期刊
    searchPeriodical(){
      this.isShow = true
      this.getPeriodicalList(true)
    },
    // 模糊查询期刊
    getPeriodicalList(isSearch = false){
      this.axios.post('PERIODICAL_LIST',{
        name: this.ruleForm.periodical,
        current: isSearch ? 1 : this.page.current,
        size: this.page.size
      }).then(result => {
        console.log('期刊列表',result)
        this.periodicalList = result.data.list
        this.page.total = result.data.totalCount
      })
    },
    // 选中表格某一项
    selectTableItem(currentRow){
      this.isShow = false
      this.ruleForm.periodical = currentRow.name
      this.ruleForm.factor = currentRow.factor
    },
    // 切换每页多少条
    handleSizeChange(val){
      this.page.size = val
      this.getPeriodicalList()
    },
    // 切换到第几页
    handleCurrentChange(val){
      this.page.current = val
      this.getPeriodicalList()
    }
  }
}
</script>

<style scoped lang="scss">
.content{
  padding: 15px 10px;
  height: calc(90vh);
  overflow-y: scroll;
}
</style>